<template>
  <div class="user_default">
    <div class="user_default_in w1200">
      <!-- 用户左侧栏目 -->
      <div class="user_left">
        <div class="user_info_block">
          <dl>
            <dt><img src="/src/assets/Home/user_default.png" alt="" /></dt>
            <dd class="nickname">用户昵称</dd>
            <dd class="edit_user_info"><router-link to="/">编辑信息</router-link></dd>
          </dl>
          <div class="user_stepbar"><span>账号资料：</span><el-progress class="progress" stroke-width="7" status="warning" percentage="100" /></div>
          <div class="user_safe">
            <span>账户安全：</span>
            <span class="safe_icon">
              <i class="fa fa-phone-square" />
              <i class="fa fa-id-card-o" />
            </span>
          </div>
        </div>

        <div class="user_nav">
          <div class="block">
            <div class="title">
              <!--              <img src="" alt="" />-->
              <!--               <i :type="v.icon" :class="'fa '+v.icon" /> -->
              <svg-icon name="fk" class="svg" color="red" />
              <span>订单中心</span>
            </div>
            <div class="nav_item"><router-link to="/">我的订单</router-link></div>
            <div class="nav_item"><router-link to="/user/address">收货地址</router-link></div>
            <div class="nav_item"><router-link to="/">评论列表</router-link></div>
          </div>
          <div class="block">
            <div class="title">
              <img src="" alt="" />
              <span>会员中心</span>
            </div>
            <div class="nav_item"><router-link to="/">个人中心</router-link></div>
            <div class="nav_item"><router-link to="/">用户资料</router-link></div>
            <div class="nav_item"><router-link to="/">账户安全</router-link></div>
            <div class="nav_item"><router-link to="/">账号绑定</router-link></div>
            <div class="nav_item"><router-link to="/">资金提现</router-link></div>
            <div class="nav_item"><router-link to="/">收藏关注</router-link></div>
            <div class="nav_item"><router-link to="/">优惠券</router-link></div>
          </div>
          <div class="block">
            <div class="title">
              <img src="" alt="" />
              <span>积分商城</span>
            </div>
            <div class="nav_item"><router-link to="/">积分订单</router-link></div>
          </div>
          <div class="block">
            <div class="title">
              <img src="" alt="" />
              <span>资产记录</span>
            </div>
            <div class="nav_item"><router-link to="/">平台余额</router-link></div>
            <div class="nav_item"><router-link to="/">冻结资金</router-link></div>
            <div class="nav_item"><router-link to="/">平台积分</router-link></div>
          </div>
          <div class="block">
            <div class="title">
              <img src="" alt="" />
              <span>分销分佣</span>
            </div>
            <div class="nav_item"><router-link to="/">分销信息</router-link></div>
            <div class="nav_item"><router-link to="/">分销会员</router-link></div>
            <div class="nav_item"><router-link to="/">分销佣金</router-link></div>
          </div>
          <div class="block">
            <div class="title">
              <img src="" alt="" />
              <span>帮助中心</span>
            </div>
            <div class="nav_item"><router-link to="/">网站公告</router-link></div>
            <div class="nav_item"><router-link to="/">其他合作</router-link></div>
            <div class="nav_item"><router-link to="/">帮助中心</router-link></div>
            <div class="nav_item"><router-link to="/">关于我们</router-link></div>
          </div>
        </div>
      </div>

      <div class="user_right">
        <router-view></router-view>
      </div>
      <div class="clear"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, getCurrentInstance } from 'vue';
import { useUserStore } from '@/store/index.js';
import SvgIcon from '@/components/SvgIcon.vue';
</script>
<style lang="scss" scoped>
.user_default {
  background: #f1f1f1;
  padding-bottom: 30px;
}
.user_left {
  float: left;
  width: 234px;
  margin-right: 20px;
  padding-top: 20px;
  .user_nav {
    margin-top: 20px;
    background: #fff;
    padding: 20px;
    .block {
      border-bottom: 1px solid #efefef;
      padding-bottom: 15px;
      margin-bottom: 15px;
      .nav_item {
        line-height: 35px;
        margin-left: 55px;
        cursor: pointer;
        color: #666;
        &:hover {
          color: #ca151e;
        }
      }
      &:last-child {
        border-bottom: none;
      }
    }
    .title {
      font-size: 18px;
      margin-bottom: 10px;
      font-weight: bold;
      display: flex;
      img {
        margin-left: 26px;
        margin-right: 10px;
      }
      .svg {
        margin-left: 26px;
        margin-right: 10px;
      }
      // i{
      //     color:#ca151e;
      //     margin:0 6px 0 24px;
      //     font-size: 14px;
      // }
    }
  }
  .user_info_block {
    background: #fff;
    padding: 20px;
    .nickname {
      width: 110px;
      overflow: hidden;
      height: 19px;
    }
    .user_stepbar {
      margin-top: 20px;
    }
    .user_safe {
      margin-top: 6px;
      i {
        margin-right: 6px;
      }
      .safe_icon .success {
        color: #67c23a;
      }
    }
    .progress {
      width: 124px;
      display: inline-flex;
    }
    dl {
      &:after {
        clear: both;
        display: block;
        content: '';
      }
      dt {
        float: left;
        margin-right: 15px;
        width: 60px;
        height: 60px;
        border: 1px solid #f4f4f4;
        border-radius: 50%;
        img {
          width: 60px;
          height: 60px;
          border-radius: 50%;
        }
      }
      dd {
        font-size: 14px;
        float: left;
        margin-top: 6px;
        &.edit_user_info {
          border: 1px solid #ca151e;
          line-height: 20px;
          text-align: center;
          padding: 0 15px;
          margin-top: 5px;
          a {
            color: #ca151e;
          }
        }
      }
    }
  }
}
.user_right {
  float: left;
  width: 946px;
  padding-top: 20px;
}
</style>
<style>
.user_stepbar .el-progress__text {
  min-width: 20px;
}
</style>
